<template>
	<view class="sun-page">
		<u-popup :show="showi8n" @close="closeshowi18n" @open="openshowi18n" :round="20">
			<view class="popup-box">
				<view class="box-title">
					<text class="left-text" @tap="closeshowi18n">取消</text>
					<text class="right-text" @tap="enteri8n">确定</text>
				</view>
				<view class="box-list">
					<view class="box-li" v-for="(item,index) in i18nlist" @tap="dei8n = item.type">
						<text>{{item.text}}</text>
						<image src="@/static/home/check-true.png" mode="" v-show="dei8n == item.type"></image>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="sun-title">
			<image src="@/static/imgs/gene/logo1.png" mode="" class="logo1"></image>
			<image src="@/static/imgs/gene/i18n_icon.png" mode="" class="i8n_icon" @tap="openshowi18n"></image>
			<u-swiper :list="imgList" height="300"></u-swiper>
		</view>


		<view class="sun-list">
			<view style="padding: 20px;">
				<u-notice-bar :text="titleText" direction="column" bgColor=" rgba(248, 248, 250, 1)"
					color="rgba(128, 128, 128, 1)"></u-notice-bar>
				<view style="margin-top: 20rpx;">
					<u-scroll-list v-if="scrollList.length>0">
						<view v-for="(item,index) in scrollList" class="sun-scroll-list">
							<image :src="item" class="sun-scroll-image"></image>
							<!-- <view class="sun-scroll-title">
								<view style="width: 100%;">{{item.title}}</view>
							</view> -->
						</view>
					</u-scroll-list>
				</view>
				<view style="margin-top: 20rpx;" v-for="(item,index) in indexList">
					<!-- <view class="sun-article">
						<view style="position: relative;">
							<image src="../../static/home/article_beijin.png"
								style="width: 80px;height: 80px;border-radius: 100%;">
							</image>
							<view class="sun-article-title">
								<view style="width: 100%;">专家</view>
							</view>
						</view>
						<view>
							<view class="sun-article-yonghu">
								<view class="sun-article-yonghu-name">董子健
								</view>
								<view class="sun-article-yonghu-ms">北京协和医院主任医师</view>
							</view>
							<view style="font-size: 10px;color: rgba(102, 102, 102, 1);">23小时前·发布了科普</view>
						</view>
					</view> -->
					<view class="sun-article" style="justify-content: space-between;" @click="goInfo(item)">
						<view>
							<view class="sun-article-yonghu">
								<view class="sun-article-yonghu-name">
									{{item.title}}
								</view>

							</view>
							<view class="sun-article-yonghu-content">{{item.summary}}</view>
							<view class="sun-article-yonghu-bottom">
								<view>{{item.time_format}}</view>
								<view>
									阅读{{item.read}}
								</view>
							</view>
						</view>
						<view style="margin-left: 10px;">
							<image :src="urlConversion(item.cover)" style="width: 111px;height: 111px;border-radius: 10px;">
							</image>

						</view>

					</view>

					<u-divider></u-divider>

				</view>
				<u-loadmore :status="status[statusindex]" />
			</view>

		</view>

	</view>
</template>

<script setup>
	import http from '@/api/request.js'
	import {
		useAppStore
	} from '@/store/index.js'
	import {
		banner,
		homeIndex,
		notice
	} from '@/api/home/home.js'
	import {
		ref,
		watch
	} from "vue";
	import {
		urlConversion
	} from '@/utils/imgUrl.js'
	import {
		onReachBottom,
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		useI18n
	} from 'vue-i18n'
	const {
		locale: i18nLanguage,
		t
	} = useI18n()
	let cursor = ref(0)
	const statusindex = ref(0)
	const status = ref([
		'loadmore',
		'loading',
		'nomore'
	])
	const store = useAppStore()
	watch(() => store.Lang,
		(newValue, oldValue) => {
			watchtabr()
			scrollList.value = []
			imgList.value = []
			indexList.value = []
			titleText.value = []
			cursor.value = 0
			show()
		})
	const list = []

	let imgList = ref([])

	let showi8n = ref(false)
	let dei8n = ref('zh-Hans')
	let titleText = ref([])
	const openshowi18n = () => {
		showi8n.value = true
	}
	const closeshowi18n = () => {
		showi8n.value = false
	}
	const enteri8n = () => {
		showi8n.value = false
		console.log(dei8n.value);
		i18nLanguage.value = dei8n.value
		uni.setStorageSync('Lang', dei8n.value)
		store.Lang = dei8n.value

	}
	let i18nlist = [{
			text: '中文-简体',
			type: 'zh-Hans'
		},
		{
			text: '中文-繁體 ',
			type: 'zh-Hant'
		},
		{
			text: 'English',
			type: 'en'
		}
	]
	let scrollList = ref([])

	let indexList = ref([])

	onReachBottom(() => {
		if (statusindex.value == 2) return;
		statusindex.value = 1;

		setTimeout(() => {
			show();
		}, 600)
	})
	const watchtabr = () => {
		uni.setTabBarItem({
			index: 0,
			text: t('home.name')
		});
		uni.setTabBarItem({
			index: 1,
			text: t('gene.name')
		});
		uni.setTabBarItem({
			index: 2,
			text: t('community.name')
		});
		uni.setTabBarItem({
			index: 3,
			text: t('user.name')
		});
	}
	onShow(() => {
		dei8n.value = uni.getStorageSync('Lang')
		watchtabr()
		show()
	})

	function show() {
		banner({
			t: 1
		}).then(res => {
			imgList.value=[]
			JSON.parse(res.data.image).forEach((item, index) => {
				imgList.value.push(urlConversion(item))
			})
		})
		banner({
			t: 2
		}).then(res => {
			if (res.data) {
				scrollList.value = []
				JSON.parse(res.data.image).forEach((item, index) => {
					scrollList.value.push(urlConversion(item))
				})
			}

		})
		homeIndex({
			cursor: cursor.value,
			limit: 10
		}).then(res => {
			console.log('res:', res)
			console.log(indexList)
			if (res.data.infs.length == 0) {
				statusindex.value = 2
			} else {
				statusindex.value = 1
			}
			indexList.value = [...indexList.value, ...res.data.infs];
			cursor.value = res.data.cursor

		})
		notice().then(res => {
			if (res.data) {
				res.data.forEach(item => {
					titleText.value.push(item.title)

				})
			}
		})

	}
	show()

	function goInfo(item) {
		console.log(item.id)
		uni.navigateTo({
			url: '/pages/home/info?id=' + item.id
		})
	}
</script>

<style scoped lang="scss">
	.sun-title {
		position: relative;
		height: 300px;
		width: 100%;

		.i8n_icon {
			z-index: 999;
			position: absolute;
			right: 40rpx;
			top: 112rpx;
			width: 48rpx;
			height: 48rpx;
		}

		.logo1 {
			z-index: 999;
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 112rpx;
			left: 40rpx;
		}
	}

	.popup-box {
		width: 100%;

		.box-list {
			padding: 0 40rpx;
			width: 100%;
			margin-bottom: 84rpx;

			.box-li {
				font-size: 16px;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 24px;
				color: rgba(34, 34, 34, 1);
				padding: 24rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid rgba(245, 245, 245, 1);

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.box-title {
			padding: 36rpx 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid rgba(245, 245, 245, 1);

			text {
				font-size: 16px;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 24px;
			}

			.left-text {
				color: rgba(153, 153, 153, 1);
			}

			.right-text {
				color: rgba(18, 39, 167, 1);
			}
		}
	}

	.sun-logo {
		width: 64rpx;
		height: 64rpx;
	}

	.sun-title-text {
		padding-left: 16rpx;
	}

	.sun-tip {
		margin: 0 20rpx 80rpx;
		color: #969799;
		font-size: 28rpx;
	}

	.sun-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #f7f8fa;
		padding: 0 40rpx;
		cursor: pointer;
		margin-bottom: 28rpx;
	}

	.sun-item .sun-arrow {
		width: 20rpx;
		height: 20rpx;
		border-top: 1rpx solid #272e2d;
		border-right: 1rpx solid #272e2d;
		transform: rotate(45deg);
	}

	.sun-scroll-list {
		position: relative;
		margin-right: 16rpx;
	}

	.sun-scroll-image {
		width: 110px;
		height: 138px;
		border-radius: 10rpx;
	}

	.sun-scroll-title {
		position: absolute;
		bottom: 10rpx;
		height: 50px;
		background: rgba(0, 0, 0, 0.3);
		width: 100%;
		color: #fff;
		display: flex;
		align-items: center;
		text-align: center;
	}

	.sun-article {
		display: flex;
		flex: 1;
	}

	.sun-article-title {
		position: absolute;
		bottom: 10rpx;
		height: 50px;
		background: rgba(0, 0, 0, 0.3);
		width: 100%;
		color: #fff;
		display: flex;
		align-items: center;
		text-align: center;
		width: 50px;
		color: rgba(110, 79, 14, 1);
		background: linear-gradient(90deg, rgba(218, 204, 175, 1) 0%, rgba(253, 226, 184, 1) 100%);
		font-size: 8px;
		border-radius: 40px;
		height: 23px;
		left: 13px;
		bottom: 0px;
	}

	.sun-article-yonghu {
		display: flex;
		margin-bottom: 4px;
		margin-top: 15px;
		align-items: baseline;
	}

	.sun-article-yonghu-name {
		font-size: 16px;
		font-weight: 700;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.sun-article-yonghu-ms {
		font-size: 12px;
		color: rgba(102, 102, 102, 1);
		margin-left: 10rpx;
	}

	.sun-article-yonghu-content {
		font-size: 12px;
		color: rgba(102, 102, 102, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 3;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		min-height: 45%;
	}

	.sun-article-yonghu-bottom {
		display: flex;
		justify-content: space-between;
		color: rgba(153, 153, 153, 1);
		font-size: 10px;
	}
</style>